<template lang="">
  <el-dialog
    title="设备使用详情"
    :visible="visible"
    width="30%"
    @close="$emit('update:visible', false)"
    center
  >
    <div>
      <div class="dialog_content_item">
        设备使用时间:
        <span style="margin-left:5px">{{ formatSeconds(useDetail.serverTime) || 0 }}</span>
      </div>
      <div class="dialog_content_item">
        设备总数订单:
        <span style="margin-left:5px">{{ useDetail.totalOrder || 0 }}条</span>
      </div>
      <!-- <div class="dialog_content_item">
        设备总数收入:
        <span style="margin-left:5px">{{ useDetail.totalMoney || 0 }}元</span>
      </div> -->
      <div class="engaged">
        <div class="engaged_title">
          <div class="content">仓位</div>
          <div class="cell_state">
            <div class="incell">有电池</div>
            <div class="nocell">没电池</div>
            <div class="abound">电池充满</div>
            <div class="abnormal">异常</div>
          </div>
        </div>

        <!-- 
					<el-checkbox-group class="engaged_group" v-model="checkboxGroup">
						<el-checkbox-button
						
						>{{ item.cabinetNo }}号仓</el-checkbox-button>
					</el-checkbox-group>-->

        <el-radio-group class="engaged_group" v-model="checkboxGroup">
          <el-radio-button
            :class="['engaged_item', 'bg_span_' + item.status]"
            v-for="item in useDetail.engaged"
            :label="item.cabinetNo"
            :key="item.cabinetNo"
            >{{ item.cabinetNo }}号仓</el-radio-button
          >
        </el-radio-group>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="success" @click="buttonClick('开仓')">开仓</el-button>
      <el-button type="primary" @click="buttonClick('通电')">通电</el-button>
      <el-button type="info" @click="buttonClick('关电')">关电</el-button>
      <el-button @click="$emit('update:visible', false)">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      checkboxGroup: "",
    };
  },
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    useDetail: {
      type: Object,
      required: true,
    },
  },
  mounted() {
    // this.useDetail.engaged.forEach((item) => {
    let spanItem = document.getElementsByTagName(
      "el-radio-group>el-radio-group"
    );
    console.log(spanItem);
    // });
  },
  watch: {
    visible: {
      handler: function (status) {
        if (!status) {
          this.checkboxGroup = "";
        }
      },
      immediate: true, //关键
      deep: true,
    },
  },
  methods: {
    buttonClick(value) {
      console.log(value, "123");
      if (this.useDetail.deviceStatus == 2) {
        this.$message({
          message: "设备已离线！",
          type: "warning",
        });
        return;
      } else if (this.useDetail.deviceStatus == 3) {
        this.$message({
          message: "设备已故障！",
          type: "warning",
        });
        return;
      }
      var openType = "";
      var openDoors = {};
      if (value === "开仓") {
        openType = "3";
      } else if (value === "通电") {
        openType = "4";
      } else if (value === "关电") {
        openType = "5";
      }
      openDoors = {
        chrType: value == "开仓" ? "0" : "1", ////0=计时   1=电量
        val: value == "开仓" ? "0" : "1", //0=计时(单位为秒)   1=电量(单位为0.001度电)
        current: value == "开仓" ? "0" : "8000", //最大电流（毫安）
        deviceNo: this.useDetail.deviceNo, //设备编号
        openType: openType, //1：充电（开仓门同时打开交流充电通道0A0C(开始订单)） 2：取电（开仓门同时关闭充电通道） 3：运维开门(单纯的开舱门) 4：单纯打开交流充电通道0A07(通电) 5：单纯关闭充电通道0A08(预购时间截止)
        cabinetNo: this.checkboxGroup.toString(), //柜子号
        deviceType: this.useDetail.deviceType,
      };

      if (this.checkboxGroup) {
        this.$confirm(
          "是否要为" + this.checkboxGroup + "号仓" + value + "?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        ).then(async () => {
          const res = await this.apis.deviceDoorPowerOn(openDoors);
          console.log("开仓---", res);
          if (res.code == 200) {
            this.$message({
              message: value + "成功",
              type: "success",
            });
            this.$emit("update:visible", false);
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
          openType = "";
          openDoors = {};
        });
      } else {
        this.$message({
          message: "请选择柜子号！",
          type: "warning",
        });
      }
    },

    selected() {
      // console.log("checkboxGroup---", this.checkboxGroup);
      // engaged.map(item => {
      // 	checkboxGroup.forEach(value => {
      // 		console.log(value);
      // 		if (item.cabinetNo == value) {
      // 			item.checked = true
      // 		} else {
      // 			item.checked = false
      // 		}
      // 	})
      // 	return item
      // })
      // console.log("engaged---", engaged);
      // console.log("checkboxGroup-----", checkboxGroup);
    },

    formatSeconds(value) {
      var theTime1 = parseInt(value); // 需要转换的时间分钟
      var theTime2 = 0; // 小时
      var theTime3 = 0; // 天

      if (theTime1 > 60) {
        theTime2 = parseInt(theTime1 / 60);
        theTime1 = parseInt(theTime1 % 60);
        if (theTime2 > 24) {
          // 大于24小时
          theTime3 = parseInt(theTime2 / 24);
          theTime2 = parseInt(theTime2 % 24);
        }
      }
      var result = "";
      if (theTime1 > 0) {
        result = "" + parseInt(theTime1) + "分钟";
      }
      if (theTime2 > 0) {
        result = "" + parseInt(theTime2) + "小时" + result;
      }
      if (theTime3 > 0) {
        result = "" + parseInt(theTime3) + "天" + result;
      }
      return result;
    },
  },
};
</script>

<style lang="scss">
.dialog_content_item {
  margin-bottom: 10px;
  font-size: 18px;
  display: flex;
  align-content: center;
}
.dialog_content_item > span {
  color: #3e8ef7;
  font-size: 20px;
}
.engaged {
}
.engaged_group {
  display: flex;
  // justify-content: space-around;
  // font-size: 0.83rem;
  flex-wrap: wrap;
}
.engaged .engaged_title {
  margin-bottom: 20px;
  display: flex;
  align-items: baseline;
}
.engaged .cell_state {
  display: flex;
  align-items: center;
  margin-right: 10px;
}
.engaged .cell_state > div {
  margin-right: 20px;
}
.engaged .cell_state .incell::before,
.engaged .cell_state .nocell::before,
.engaged .cell_state .abound::before,
.engaged .cell_state .abnormal::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 5px;
  background-color: #f1e322;
}
.engaged .cell_state .nocell::before {
  background-color: #e5e5e5;
}
.engaged .cell_state .abound::before {
  background-color: #37f31e;
}
.engaged .cell_state .abnormal::before {
  background-color: #ec0b0b;
}
.engaged .engaged_title > div {
  font-size: 18px;
  display: flex;
  align-items: center;
}
.engaged .engaged_title .content {
  font-size: 22px;
  font-weight: 500;
  margin-right: 20px;
  font-weight: 700;
}

.engaged .engaged_item {
  width: 80px;
  color: #fff;
  font-size: 20px;
  margin-right: 20px;
  margin-bottom: 10px;
  text-align: center;
}

.el-radio-button__inner {
  width: 100%;
  border: 1px solid #dcdfe6;
}

.bg_span_0 span {
  background-color: #e5e5e5;
}
.bg_span_1 span {
  background-color: #f1e322;
}
.bg_span_2 span {
  background-color: #37f31e;
}
.bg_span_3 span {
  background-color: red;
}
</style>
